<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue shadow" :isBack="true">
			<block slot="content">{{ title }} - 搜索结果</block>
		</cu-custom>
		<view class="cu-card article no-card">
			<block v-for="(item, index) of flowList" :key="index">
				<view class="cu-item shadow u-border-top" @click="atcItemClicked(item)">
					<view class="title">
						<view class="text-cut">{{ item.title }}</view>
					</view>
					<view class="content">
						<image :src="!item.firstImg ? defaultImgUrl : item.firstImg" mode="scaleToFill" lazy-load="true"
						@tap="previewImg" :data-imgurl="!item.firstImg ? defaultImgUrl : item.firstImg"></image>
						<view class="desc">
							<view class="text-content">{{ item.description.substring(0, 20) }}</view>
							<view>
								<block v-for="(tag, tIndex) of item.keywords.split(',').slice(0, 2)" :key="tIndex">
									<view class="cu-tag bg-red light sm round" v-if="tIndex % 2 == 0">{{ tag }}</view>
									<view class="cu-tag bg-brown light sm round" v-if="tIndex % 2 != 0">{{ tag }}</view>
								</block>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-loadmore class="padding" bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData" :load-text="loadText"></u-loadmore>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			sValue: '',
			searchAtcUrl: '',
			loadStatus: 'loadmore',
			loadText: {
				loadmore: '点击或上拉加载更多',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			flowList: [],
			tabItemDataList: [],
			defaultImgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
			pageIndex: 0,
			myLocalStoreUtil: null
		};
	},
	onLoad(options) {
		uni.startPullDownRefresh();
		this.searchAtcUrl = uni.$AppConfig.requestConfig.searchArticleUrl;
		this.sValue = options.sValue;
		this.title = this.sValue;
		
		const history = new uni.$MyLocalStoreUtil('history_record');
		this.myLocalStoreUtil = history;
	},
	methods: {
		getInitData(url, successCallback) {
			let _this = this;
			uni.request({
				url: url, //仅为示例，并非真实接口地址。
				data: {
				},
				success: res => {
					if (res == 'undefined') {
						_this.getInitDataErrMsg();
						return;
					}
					
					successCallback(res);
				},
				fail: err => {
					_this.getInitDataErrMsg();
				}
			});
		},
		getLoadTabData() {
			// 设置数据
			let _this = this;
			_this.getAtcItemList();
		},
		getAtcItemList() {
			let _this = this;
			let page = _this.pageIndex;
			let reqUrl = _this.searchAtcUrl + '?orderBy=publish_time&q=' + this.sValue + '&page=' + page;
			
			_this.getInitData(reqUrl, function(res) {
				console.log(res)
				if (res == 'undefined') {
					_this.getInitDataErrMsg();
					return;
				}
		
				let resTrueData = res.data;
				
				if (resTrueData.code == 1) {
					if(resTrueData.data == null) {
						uni.showToast({
							title: '无搜索结果',
							icon: 'none'
						})
						_this.loadStatus = 'nomore';
						uni.hideLoading();
						uni.stopPullDownRefresh();
						return;
					}
					_this.tabItemDataList = resTrueData.data;
					
					if(_this.tabItemDataList.length == 0) {
						_this.loadStatus = 'nomore';
					} else {
						if(_this.pageIndex > 0) {
							_this.flowList = _this.flowList.concat(_this.tabItemDataList);
						} else {
							_this.flowList = _this.tabItemDataList;
						}
						console.log(_this.flowList)
						_this.loadStatus = 'loadmore';
					}
					
					uni.hideLoading();
					uni.stopPullDownRefresh();
				} else {
					_this.getInitDataErrMsg();
				}
			});
		},
		atcItemClicked(item) {
			uni.navigateTo({
				url: '../../catalogs/article-detail/article-detail?id=' + item.id
			});
		},
		getInitDataErrMsg() {
			uni.showToast({
				title: '数据加载失败',
				icon: 'error',
				duration: 2000
			});
		},
		previewImg(e) {
			// let imgurl = e.currentTarget.dataset.imgurl;
			// let imgArr = [];
			// imgArr[0] = imgurl;
			// uni.previewImage({
			// 	current: 0,
			// 	urls: imgArr
			// });
		},
		addRandomData() {
			const _this = this;
			_this.loadStatus = 'loading';
			this.pageIndex++;
			setTimeout(function() {
				_this.getLoadTabData();
				
			}, 1000);
		},
	},
	onPullDownRefresh() {
		this.pageIndex = 0;
		this.flowList = [];
		this.addRandomData();
	},
	onReachBottom() {
		// this.addRandomData();
	}
};
</script>

<style></style>
